<template>
  <div class="proper-manage-com-basereport">
    <secDescriptions
      :data="formConfig.data"
      :colon="true"
      :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
      :contentStyle="{ 'line-height': '36px' }"
      :column="3"
      :border="false"
      :keyData="formConfig.baseInfo"
      title="基础信息"
    >
    </secDescriptions>

    <secDescriptions
      :data="formConfig.data"
      :colon="true"
      :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
      :contentStyle="{ 'line-height': '36px' }"
      :column="3"
      :border="false"
      :keyData="formConfig.per"
      title="权属信息"
    >
    </secDescriptions>

    <secDescriptions
      :data="formConfig.data"
      :colon="true"
      :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
      :contentStyle="{ 'line-height': '36px' }"
      :column="3"
      :border="false"
      :keyData="formConfig.risk"
      title="风险信息"
    >
    </secDescriptions>

    <secDescriptions
      :data="formConfig.data"
      :colon="true"
      :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
      :contentStyle="{ 'line-height': '36px' }"
      :column="3"
      :border="false"
      :keyData="formConfig.other"
      title="其他信息"
    >
    </secDescriptions>

    <h5 class="cls title">审计进度</h5>
    <el-steps :active="active" finish-status="success">
      <el-step v-for="(item, index) in steps" :key="index" :title="item.statusName">
        <template slot="description">
          <div>
            <span v-if="item.operaUser">操作人:{{ item.operaUser }}</span
            ><br />
            <span v-if="item.time">操作时间：:{{ item.time }}</span>
          </div>
        </template>
      </el-step>
    </el-steps>

    <h5 class="cls title">审计设定项</h5>
    <eTable :tableData="evalSettingTable.rows" :tableCol="evalSettingTable.cols"></eTable>

    <h5 class="cls title">调研问卷</h5>
    <secQuestion :data="questionData" :disabled="true"> </secQuestion>

    <h5 class="cls title">风险列表</h5>
    <risklist-table />
    <h5 class="cls title">审计结果</h5>
    <result-table style="margin:0 0 0 20px" />
  </div>
</template>

<script>
import resultTable from "./resultTable.vue";
import secDescriptions from "components/descriptions/myDescriptions";
import eTable from "components/table/comTable";
import risklistTable from "./risklistTable.vue";

import { reportDetailApi, reportHiveinfoApi, getQuestionsApi } from "api/evaluateApi";
export default {
  props: {
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    eTable,
    resultTable,
    risklistTable,
    secDescriptions,
  },

  computed: {
    formConfig: function() {
      let tmp = Object.assign({}, this.formData);
      if (this.$store.state.dictionary[100100].filter((e) => e.value == tmp.source).length > 0) {
        tmp.source = this.$store.state.dictionary[100100].filter((e) => e.value == tmp.source)[0].label;
      }
      if (this.$store.state.dictionary[100400].filter((e) => e.value == tmp.importSystem).length > 0) {
        tmp.importSystem = this.$store.state.dictionary[100400].filter((e) => e.value == tmp.importSystem)[0].label;
      }
      if (this.$store.state.dictionary["scanDev"].filter((e) => e.value == tmp.scanDev).length > 0) {
        tmp.scanDev = this.$store.state.dictionary["scanDev"].filter((e) => e.value == tmp.scanDev)[0].label;
      }
      if (this.$store.state.dictionary[100500].filter((e) => e.value == tmp.status).length > 0) {
        tmp.status = this.$store.state.dictionary[100500].filter((e) => e.value == tmp.status)[0].label;
      }
      if (this.$store.state.dictionary[100200].filter((e) => e.value == tmp.netDev).length > 0) {
        tmp.netDev = this.$store.state.dictionary[100200].filter((e) => e.value == tmp.netDev)[0].label;
      }
      if (Array.isArray(tmp.pmUsers)) {
        tmp.pmUsers = tmp.pmUsers.map((e) => e.account).join(",");
      }
      if (Array.isArray(tmp.noticeUsers)) {
        tmp.noticeUsers = tmp.noticeUsers.map((e) => e.account).join(",") + "dd";
      }

      return {
        data: tmp,
        baseInfo: [
          { label: "资产来源", prop: "source" },
          { label: "资产ID", prop: "id" },
          { label: "域名", prop: "domain" },
          { label: "系统名称", prop: "domainName" },
          { label: "资产级别", prop: "importSystem" },
          { label: "资产类型", prop: "scanDev" },
          { label: "资产状态", prop: "status" },
          { label: "访问性", prop: "netDev" },
        ],
        per: [
          { label: "权属负责人", prop: "leaderName" },
          { label: "BP", prop: "bp" },
          { label: "PM", prop: "pmUsers" },
          { label: "项目关注人", prop: "noticeUsers" },
          { label: "创建人", prop: "creator" },
          { label: "权属部门", prop: "dept2" },
        ],
        risk: [
          { label: "待处理风险", prop: "riskNum" },
          { label: "已处理风险", prop: "riskDoneNum" },
          { label: "敏感时间", prop: "intervalDate" },
          { label: "敏感间隔(天)", prop: "intervalDays" },
        ],
        other: [
          { label: "集群环境", prop: "cluster" },
          { label: "国家码", prop: "ctCode" },
          { label: "录入时间", prop: "createTimeText" },
          { label: "系统简介", prop: "extraData", span: 24 },
          { label: "备注", prop: "remark1", span: 24 },
        ],
      };
    },
  },
  data() {
    return {
      ruleForm: {},
      questionData: [],
      evalSettingTable: {
        cols: [
          { label: "库名", prop: "dbName" },
          {
            label: "表名",
            prop: "tableName",
          },
        ],
        rows: [{ tableName: "", dbName: "" }],
      },
      active: 1,
      progressData: {}, //审计进度数据
      steps: [{ statusName: "", time: "", operaUser: "" }],
      progressData: {},
      reportProgress: [
        {
          status: "wait",
          statusId: 10,
          statusText: "发起审计",
          time: "",
          operaUser: "",
        },
        {
          status: "wait",
          statusId: 11,
          statusText: "系统审计",
          time: "",
          operaUser: "",
        },
        {
          status: "wait",
          statusId: 12,
          statusText: "信息补充",
          time: "",
          operaUser: "",
        },
        {
          status: "wait",
          statusId: 13,
          statusText: "审计确认",
          time: "",
          operaUser: "",
        },
        {
          status: "wait",
          statusId: 24,
          statusText: "漏洞整改",
          time: "",
          operaUser: "",
        },
        {
          status: "wait",
          statusId: 25,
          statusText: "漏洞复核",
          time: "",
          operaUser: "",
        },
        {
          status: "wait",
          statusId: 36,
          statusText: "已完成",
          time: "",
          operaUser: "",
        },
      ],
      hive: [],
    };
  },
  async mounted() {
    this.setStep(); //审计进度
    this.evalSettingTable.rows = await this.getHive(); //审计项设定
    this.getQuestionsData(); //问卷调查
  },
  methods: {
    //获取报告进度
    async getReportProgress() {
      let { data } = await reportDetailApi({ assetId: this.formData.id });
      this.progressData = data;
    },
    async getHive() {
      let { data } = await reportHiveinfoApi({ assetId: this.formData.id });
      return data;
    },
    //调研问卷
    async getQuestions() {
      let { data } = await getQuestionsApi({ assetId: this.formData.id });
      return data;
    },
    async setStep() {
      await this.getReportProgress();
      let { reportOprDetails } = this.progressData;
      this.steps = [];
      //根据后台返回的数据，填充时间和操作人
      this.$store.state.dictionary[100800].forEach((item) => {
        if (item.value) {
          let obj = { statusName: item.label, status: item.value, time: "", operaUser: "" };
          reportOprDetails.forEach((step) => {
            if (step.status == item.value) {
              obj.time = step.time;
              obj.operaUser = step.operaUser;
            }
          });
          this.steps.push(obj);
        }
        //走到了哪一步
        if (this.progressData.status === item.value) {
          this.active = item.step;
        } else if (this.progressData.status === "37") {
          //已归档 审计进度到已完成步骤
          this.active = 6;
        }
      });
    },
    async getQuestionsData() {
      let data = await this.getQuestions();
      this.questionData = data.questions;
      let form = {};
      this.questionData = this.questionData.filter((item) => {
        return item.optionNames.length > 0;
      });
      this.questionData.forEach((item, index) => {
        //兼容之前添加了（序号、） 现在需要去除 实现传给后台的时候question也不带着（序号、） 现在是直接在html中加这个序号、了
        item.question = item.question.slice(item.question.indexOf("、") + 1);
        // item["question"] = `${index + 1}、${item.question}`;
        if (item.options === "checkbox") {
          form[item.sceneId] = item.checkIds || [];
        } else if (item.options === "radio") {
          //由于checkIds 都是数组，radio类型下需要转化成字符串才可以
          form[item.sceneId] = item.checkIds.length > 0 ? item.checkIds[0] : "";
        }
      });
      this.ruleForm = form;
    },
  },
};
</script>

<style lang="scss">
.proper-manage-com-basereport {
  .el-form-item {
    margin-bottom: 0px;
  }
  .el-form-item__label {
    font-size: 14px;
  }
  .el-step__title {
    font-size: 15px;
  }
}
.el-form--label-top .el-form-item__label {
  padding: 0;
}
</style>
<style scoped>
::v-deep .question-con {
  box-shadow: none;
}
::v-deep .question-main {
  margin: 0;
}
</style>
